all
car
holiday
building
boat
revision:
code:
<section class="gallery">
<div class="container_A">
<div class="row">
<div class="gallery-filter">
<span class="filter-item active" data-filter="all">all</span>
<span class="filter-item" data-filter="car">car</span>
<span class="filter-item" data-filter="holiday">holiday</span>
<span class="filter-item" data-filter="building">building</span>
<span class="filter-item" data-filter="boat">boat</span>
</div>
</div>
<div class="row1">
<div class="gallery-item car">
<div class="gallery-item-inner">
<img src="../images/car1.jpg" alt="car">
</div>
</div>
<div class="gallery-item car">
<div class="gallery-item-inner">
<img src="../images/car2.jpg" alt="car">
</div>
</div>
<div class="gallery-item car">
<div class="gallery-item-inner">
<img src="../images/car3.jpg" alt="car">
</div>
</div>
<div class="gallery-item holiday">
<div class="gallery-item-inner">
<img src="../images/1.jpg" alt="holiday">
</div>
</div>
<div class="gallery-item holiday">
<div class="gallery-item-inner">
<img src="../images/5.jpg" alt="holiday">
</div>
</div>
<div class="gallery-item holiday">
<div class="gallery-item-inner">
<img src="../images/10.jpg" alt="holiday">
</div>
</div>
<div class="gallery-item building">
<div class="gallery-item-inner">
<img src="../images/11a.jpg" alt="building">
</div>
</div>
<div class="gallery-item building">
<div class="gallery-item-inner">
<img src="../images/18.jpg" alt="building">
</div>
</div>
<div class="gallery-item boat">
<div class="gallery-item-inner">
<img src="../images/4.jpg" alt="boat">
</div>
</div>
<div class="gallery-item boat">
<div class="gallery-item-inner">
<img src="../images/6.jpg" alt="boat">
</div>
</div>
</div>
</div>
</section>
<style>
.container_A{max-width: 99vw; margin:auto;}
.row1{display: flex;flex-wrap: wrap;}
img{max-width: 100%; vertical-align: middle; }
/*.gallery*/
.gallery{width: 100%; display: block; min-height: 100vh; background-color: transparent; padding: 100px 0;}
.gallery .gallery-filter{padding: 0 15px; width: 100%; text-align: center; margin-bottom: 40px;}
.gallery .gallery-filter .filter-item{ color: grey; font-size: 17px; border: 2px solid darkgrey; text-transform: uppercase;
display: inline-block; border-radius: 20px; margin-right: 8px; cursor: pointer; padding: 8px 20px 8px 20px; line-height: 1.2;
transition: all 0.3s ease; }
.gallery .gallery-filter .filter-item.active{ color: white; border-color : #16b5ef; background: #16b5ef;}
.gallery .gallery-item{width: calc(100% / 3); padding: 15px;}
.gallery .gallery-item-inner img{width: 100%; border: 3px solid #d4dad9;}
.gallery .gallery-item.show{animation: fadeIn 0.5s ease;}
@keyframes fadeIn{
0%{ opacity: 0;}
100%{opacity: 1;}
}
.gallery .gallery-item.hide{
display: none;
}
/*responsive*/
@media(max-width: 491px){
.gallery .gallery-item{width: 50%;}
}
@media(max-width: 467px){
.gallery .gallery-item{width: 100%;}
.gallery .gallery-filter .filter-item{margin-bottom: 10px;}
}
</style>
<script>
const filterContainer = document.querySelector(".gallery-filter"),
galleryItems = document.querySelectorAll(".gallery-item");
filterContainer.addEventListener("click", (event) =>{
if(event.target.classList.contains("filter-item")){
// deactivate existing active 'filter-item'
filterContainer.querySelector(".active").classList.remove("active");
// activate new 'filter-item'
event.target.classList.add("active");
const filterValue = event.target.getAttribute("data-filter");
galleryItems.forEach((item) =>{
if(item.classList.contains(filterValue) || filterValue === 'all'){
item.classList.remove("hide");
item.classList.add("show");
}
else{
item.classList.remove("show");
item.classList.add("hide");
}
});
}
});
</script>